<template>
  <div class="wty-content-banner">
    <div class="wty-content-banner-wrapper">
      <div class="wty--content-banner-left-wrapper">
        <WtyBannerLeft></WtyBannerLeft>
      </div>
      <div class="wty-content-banner-middle-wrapper">
        <WtyBannerMiddle></WtyBannerMiddle>
      </div>
      <div class="wty-content-banner-right-wrapper">
        <WtyBannerRight></WtyBannerRight>
      </div>
    </div>
  </div>
</template>

<script>
import WtyBannerLeft from "@/components/foodie/content/wty-content-banner-left.vue";
import WtyBannerMiddle from "@/components/foodie/content/wty-content-banner-middle.vue";
import WtyBannerRight from "@/components/foodie/content/wty-content-banner-right.vue";
export default {
  components: {
    WtyBannerLeft,
    WtyBannerMiddle,
    WtyBannerRight
  }
};
</script>

<style lang="scss" scoped>
.wty-content-banner {
  box-shadow: 0 10px 10px rgba($color: #000000, $alpha: 0.1) inset;
  .wty-content-banner-wrapper {
    width: 1190px;
    height: 427px;
    margin: 0 auto; // 上下为零，左右auto
    // background-color: red;
    display: flex;
    .wty--content-banner-left-wrapper {
      flex: 0 0 229px;
      width: 229px;
    }
    .wty-content-banner-middle-wrapper {
      flex: 0 0 710px;
      margin: 0 10px;
      padding-top: 10px;
    }
    .wty-content-banner-right-wrapper {
      flex: 1;
      padding-top: 10px;
    }
  }
}
</style>
